<template>
  <div class="main">
   <tab >
    <tab-item selected  @on-item-click="tabClick">常见问题</tab-item>
    <tab-item @on-item-click="tabClick">操作指南</tab-item>
  </tab>
  <div v-if="tabindex" >
    <div class="bigtitle"><h1>常见问题<span class="futit">Common problem</span></h1></div>
    <div class="searching"><input type="text" value="请输入关键词"><router-link to="#"><x-icon type="ios-search-strong" size="30" class="btnsearch"></x-icon></router-link></div>
    <div class="question">
      <ul>
        <li>
          <router-link to="/Question_detail">
            <h1><i class="bluefont">Q</i><span>走近国际贸易“单一窗口”（一）“单一窗口”的国际背景</span></h1>
            <p><i class="bluefont">A</i><span>国际贸易“单一窗口”是国际口岸管理的先进理念和通行规则，是世界各国促进贸易便利化、优化营商环境的重要手</span></p>
          </router-link>
        </li>
        <li>
          <router-link to="/Question_detail">
            <h1><i class="bluefont">Q</i><span>走近国际贸易“单一窗口”（一）“单一窗口”的国际背景</span></h1>
            <p><i class="bluefont">A</i><span>国际贸易“单一窗口”是国际口岸管理的先进理念和通行规则，是世界各国促进贸易便利化、优化营商环境的重要手</span></p>
          </router-link>
        </li>
        <li>
          <router-link to="/Question_detail">
            <h1><i class="bluefont">Q</i><span>走近国际贸易“单一窗口”（一）“单一窗口”的国际背景</span></h1>
            <p><i class="bluefont">A</i><span>国际贸易“单一窗口”是国际口岸管理的先进理念和通行规则，是世界各国促进贸易便利化、优化营商环境的重要手</span></p>
          </router-link>
        </li>
        <li>
          <router-link to="/Question_detail">
            <h1><i class="bluefont">Q</i><span>走近国际贸易“单一窗口”（一）“单一窗口”的国际背景</span></h1>
            <p><i class="bluefont">A</i><span>国际贸易“单一窗口”是国际口岸管理的先进理念和通行规则，是世界各国促进贸易便利化、优化营商环境的重要手</span></p>
          </router-link>
        </li>
        <li>
          <router-link to="/Question_detail">
            <h1><i class="bluefont">Q</i><span>走近国际贸易“单一窗口”（一）“单一窗口”的国际背景</span></h1>
            <p><i class="bluefont">A</i><span>国际贸易“单一窗口”是国际口岸管理的先进理念和通行规则，是世界各国促进贸易便利化、优化营商环境的重要手</span></p>
          </router-link>
        </li>
        <li>
          <router-link to="/Question_detail">
            <h1><i class="bluefont">Q</i><span>走近国际贸易“单一窗口”（一）“单一窗口”的国际背景</span></h1>
            <p><i class="bluefont">A</i><span>国际贸易“单一窗口”是国际口岸管理的先进理念和通行规则，是世界各国促进贸易便利化、优化营商环境的重要手</span></p>
          </router-link>
        </li>
        <li>
          <router-link to="/Question_detail">
            <h1><i class="bluefont">Q</i><span>走近国际贸易“单一窗口”（一）“单一窗口”的国际背景</span></h1>
            <p><i class="bluefont">A</i><span>国际贸易“单一窗口”是国际口岸管理的先进理念和通行规则，是世界各国促进贸易便利化、优化营商环境的重要手</span></p>
          </router-link>
        </li>
        <li>
          <router-link to="/Question_detail">
            <h1><i class="bluefont">Q</i><span>走近国际贸易“单一窗口”（一）“单一窗口”的国际背景</span></h1>
            <p><i class="bluefont">A</i><span>国际贸易“单一窗口”是国际口岸管理的先进理念和通行规则，是世界各国促进贸易便利化、优化营商环境的重要手</span></p>
          </router-link>
        </li>
        <li>
          <router-link to="/Question_detail">
            <h1><i class="bluefont">Q</i><span>走近国际贸易“单一窗口”（一）“单一窗口”的国际背景</span></h1>
            <p><i class="bluefont">A</i><span>国际贸易“单一窗口”是国际口岸管理的先进理念和通行规则，是世界各国促进贸易便利化、优化营商环境的重要手</span></p>
          </router-link>
        </li>
        


      </ul>
    </div>
  </div>
  <div id="cangdan" v-else >
    <div class="bigtitle"><h1>操作指南<span class="futit">Operation guide</span></h1></div>
    <div class="searching"><input type="text" value="请输入关键词"><router-link to="#"><x-icon type="ios-search-strong" size="30" class="btnsearch"></x-icon></router-link></div>
    <div class="caozuo">
      <ul>
        <li>
          <router-link to="#">
            <div class="leftpart"><img src="../assets/images/download.png" alt=""><p>下载</p></div>
            <h1>“单一窗口”标准版用户手册（企业资质篇）</h1>
          </router-link>
      </li>
        <li>
          <router-link to="#">
            <div class="leftpart"><img src="../assets/images/download.png" alt=""><p>下载</p></div>
            <h1>“单一窗口”标准版用户手册（企业资质篇）手册手册手册手册</h1>
          </router-link>
      </li>
        <li>
          <router-link to="#">
            <div class="leftpart"><img src="../assets/images/download.png" alt=""><p>下载</p></div>
            <h1>“单一窗口”标准版用户手册（企业资质篇）</h1>
          </router-link>
      </li>
        <li>
          <router-link to="#">
            <div class="leftpart"><img src="../assets/images/download.png" alt=""><p>下载</p></div>
            <h1>“单一窗口”标准版用户手册（企业资质篇）</h1>
          </router-link>
      </li>
        <li>
          <router-link to="#">
            <div class="leftpart"><img src="../assets/images/download.png" alt=""><p>下载</p></div>
            <h1>“单一窗口”标准版用户手册（企业资质篇）</h1>
          </router-link>
      </li>
        <li>
          <router-link to="#">
            <div class="leftpart"><img src="../assets/images/download.png" alt=""><p>下载</p></div>
            <h1>“单一窗口”标准版用户手册（企业资质篇）</h1>
          </router-link>
      </li>
        <li>
          <router-link to="#">
            <div class="leftpart"><img src="../assets/images/download.png" alt=""><p>下载</p></div>
            <h1>“单一窗口”标准版用户手册（企业资质篇）</h1>
          </router-link>
      </li>
    </ul>
  </div>
</div>




<router-view  name="footer"></router-view>

</div>
</template>


<script>
  export default {
    name: 'News'
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  @import '../assets/css/news.css';


</style>
<script>



  export default {
    data () {
      return {
        tabindex:true
      }
    },methods: {
      tabClick (index) {
       this.tabindex = !this.tabindex
     }
   }
 }

</script>